:root {
    --color1: #000;
    --color2: #070707;
    --color3: #111;
    --color4: #232323;
    --color5: #333;
    --color6: #666;
    --color7: #999;
    --color8: #ccc;
    --color9: #dcdcdc;
    --color10: #eee;
    --color11: #f8f8f8;
    --color12: #fff;
    --primary-color: #92dde1;
    --darken-primary-color: #104d4d;
    --darken-primary-color-alpha: rgba(14, 68, 68, 0.5);
    --primary2: #3086ff;
    --primary3: #cee2ff;
    --primary4: #eff5ff;
    --success1: #67c23a;
    --success2: #7fc45d;
    --success3: #e4ffd7;
    --success4: #f9fff6;
    --warning1: #e6a23c;
    --warning2: #e0b26b;
    --warning3: #e0d0b8;
    --warning4: #e0dbd3;
    --danger1: #f56c6c;
    --danger2: #f38080;
    --danger3: #ffdddd;
    --danger4: #fff9f9;
    &[data-mode="dark"] {
        --color1: #fff;
        --color2: #f8f8f8;
        --color3: #eee;
        --color4: #dcdcdc;
        --color5: #ccc;
        --color6: #999;
        --color7: #666;
        --color8: #333;
        --color9: #232323;
        --color10: #111;
        --color11: #070707;
        --color12: #000;
    }
    &[data-theme="blue"] {
        --color1: #000000;
        --color2: #051122;
        --color3: #122747;
        --color4: #1e3861;
        --color5: #2d4774;
        --color6: #44608f;
        --color7: #5b75a1;
        --color8: #778cb1;
        --color9: #8b9cbd;
        --color10: #b1bdd3;
        --color11: #dbe0eb;
        --color12: #ffffff;
        &[data-mode="dark"] {
            --color1: #ffffff;
            --color2: #dbe0eb;
            --color3: #b1bdd3;
            --color4: #8b9cbd;
            --color5: #778cb1;
            --color6: #5b75a1;
            --color7: #44608f;
            --color8: #2d4774;
            --color9: #1e3861;
            --color10: #122747;
            --color11: #051122;
            --color12: #000000;
        }
    }
    &[data-theme="yellow"] {
        --color1: #000000;
        --color2: #292906;
        --color3: #313109;
        --color4: #505015;
        --color5: #666625;
        --color6: #72722f;
        --color7: #9b9b5a;
        --color8: #aaaa71;
        --color9: #b4b47e;
        --color10: #cacaa8;
        --color11: #e0e0cd;
        --color12: #ffffff;
        &[data-mode="dark"] {
            --color1: #ffffff;
            --color2: #e0e0cd;
            --color3: #cacaa8;
            --color4: #b4b47e;
            --color5: #aaaa71;
            --color6: #9b9b5a;
            --color7: #72722f;
            --color8: #666625;
            --color9: #505015;
            --color10: #313109;
            --color11: #292906;
            --color12: #000000;
        }
    }
    &[data-theme="red"] {
        --color1: #000000;
        --color2: #1d0303;
        --color3: #2e0b0b;
        --color4: #421313;
        --color5: #5e1e1e;
        --color6: #6b2c2c;
        --color7: #884949;
        --color8: #a56a6a;
        --color9: #b88282;
        --color10: #d3abab;
        --color11: #e2cfcf;
        --color12: #ffffff;
        &[data-mode="dark"] {
            --color1: #ffffff;
            --color2: #e2cfcf;
            --color3: #d3abab;
            --color4: #b88282;
            --color5: #a56a6a;
            --color6: #884949;
            --color7: #6b2c2c;
            --color8: #5e1e1e;
            --color9: #421313;
            --color10: #2e0b0b;
            --color11: #1d0303;
            --color12: #000000;
        }
    }
    &[data-theme="green"] {
        --color1: #000000;
        --color2: #052705;
        --color3: #0d3a0d;
        --color4: #174e17;
        --color5: #246324;
        --color6: #327532;
        --color7: #458345;
        --color8: #619661;
        --color9: #84b884;
        --color10: #bcd6bc;
        --color11: #d6e4d6;
        --color12: #ffffff;
        &[data-mode="dark"] {
            --color1: #ffffff;
            --color2: #d6e4d6;
            --color3: #bcd6bc;
            --color4: #84b884;
            --color5: #619661;
            --color6: #458345;
            --color7: #327532;
            --color8: #246324;
            --color9: #174e17;
            --color10: #0d3a0d;
            --color11: #052705;
            --color12: #000000;
        }
    }
    &[data-theme="gray"] {
        --color1: #222;
        --color2: #333;
        --color3: #444;
        --color4: #555;
        --color5: #666;
        --color6: #777;
        --color7: #888;
        --color8: #999;
        --color9: #aaa;
        --color10: #bbb;
        --color11: #ccc;
        --color12: #ddd;
        &[data-mode="dark"] {
            --color1: #ddd;
            --color2: #ccc;
            --color3: #bbb;
            --color4: #aaa;
            --color5: #999;
            --color6: #888;
            --color7: #777;
            --color8: #666;
            --color9: #555;
            --color10: #444;
            --color11: #333;
            --color12: #222;
        }
    }
}
